import React, {useRef, useState} from "react";
import ProTable, {type ActionType, type ProColumns} from "@ant-design/pro-table";
import {pageVehicleUsageAPI} from "@/pages/vehicle/vehicle-usage/service";
import VehicleUsageDetail from "@/pages/vehicle/vehicle-usage/components/VehicleUsageDetail";

const VehicleUsage: React.FC = () => {

  const actionRef = useRef<ActionType>();
  const [detailVisible, setDetailVisible] = useState(false);
  const [vehicleUsage, setVehicleUsage] = useState<API.IVehicleUsage | undefined>(undefined);

  const columns: ProColumns<API.IVehicleUsage>[] = [
    {
      title: '车辆编码',
      dataIndex: 'vehicleId',
      copyable: true,
      align: 'center',
    },
    {
      title: '教练编码',
      dataIndex: 'coachId',
      copyable: true,
      align: 'center',
    },
    {
      title: '使用用途',
      dataIndex: 'usagePurpose',
      valueEnum: {
        '1': {text: '教学'},
        '2': {text: '考试'},
        '3': {text: '维修'},
        '4': {text: '其他'},
      },
      align: 'center',
    },
    {
      title: '使用状态',
      dataIndex: 'usageStatus',
      valueEnum: {
        '1': {text: '正常', status: 'Success'},
        '2': {text: '异常', status: 'Error'},
      },
      align: 'center',
    },

    {
      title: '异常情况描述',
      dataIndex: 'abnormalDescription',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '课程编码',
      dataIndex: 'lessonId',
      copyable: true,
      align: 'center',
    },
    {
      title: '申请时间',
      dataIndex: 'startTime',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '燃油消耗量',
      dataIndex: 'fuelConsumption',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '开始里程',
      dataIndex: 'startMileage',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '结束里程',
      dataIndex: 'endMileage',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '操作',
      valueType: 'option',
      render: (_, record) => [
        <a
          key="detail"
          onClick={() => {
            setVehicleUsage(record);
            setDetailVisible(true);
          }}
        >
          详情
        </a>,
      ],
    }
  ];


  return (
    <div style={{minHeight: '80vh'}} className={'protable-compact-wrapper'}>
      <ProTable<API.IVehicleUsage>
        columns={columns}
        actionRef={actionRef}
        request={async (params) => {
          const {data} = await pageVehicleUsageAPI(params)
          return data
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
          span: 4,
        }}
        toolBarRender={() => []}
      />
      <VehicleUsageDetail
        visible={detailVisible}
        data={vehicleUsage}
        onClose={() => setDetailVisible(false)}
      />
    </div>
  )
}
export default VehicleUsage
